
<template>
	<div class="yongjinjilu">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/yongjin' }">分销商管理</el-breadcrumb-item>
            <el-breadcrumb-item>分销模式</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
            <div><img src="../../../static/img/tb1.png" style="width: 22px; margin-right: 10px;"></div>
            <div>分销等级管理启用设置</div>
          </div>
          <div class="baibeijing flexc">
            <div><el-switch v-model="openswitch" @change="postk" style="width: 85px; height: 41px; margin-right: 20px;"  :active-value="1" :inactive-value="0"></el-switch></div>
            <div style="color: rgb(175, 179, 188);">启用等级机制后将由等级决定分销商的佣金比例和提成比例，等级对应的佣金比例由您设置。</div>
          </div>
          <div style="padding: 19px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
            <div><img src="../../../static/img/tb3.png" style="width: 22px; margin-right: 10px;"></div>
            <div>等级值设置</div>
          </div>
          <div style="background: #fff; padding: 40px; border-radius: 20px; color: rgb(64, 66, 71);">
            <div style="margin-bottom: 15px;">升/保级方式：按照等级值</div>
            <div class="flexc" style="margin-bottom: 30px;">
              <div>等级值名称：</div>
              <div><el-input :disabled="!openswitch" v-model="list.level_name" style="width: 300px; margin-right: 30px;" placeholder="请输入等级值名称"></el-input></div>
            </div>
            <div style="margin-bottom: 20px; color: rgb(64, 66, 71); font-weight: bold;">等级值规则：修改等级值只会影响到之后产生的等级值，已产生的不受影响</div>
            <div class="flex" style="margin-bottom: 20px;">
              <div style="width: 200px; padding-left: 40px;">任务</div>
              <div style="width: 200px; padding-left: 60px;">获得等级值</div>
            </div>


            <div  style="margin-bottom: 20px; font-size: 14px;" v-for="item in list.level_rules">
              <div v-if="item.type == 'self_order'" class="flexc">

                <div style="width: 200px;"><el-checkbox :disabled="!openswitch" v-model="item.open" :true-label="1"  :false-label="0">发展订单</el-checkbox></div>

                <div style="width: 120px; text-align: right;">每1单得：</div>
                <div><el-input :disabled="!openswitch" v-model="item.level_exp" style="width: 100px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                <div>订单要求：</div>

                <div>
                  <el-select :disabled="!openswitch" v-model="item.order_status" style="width: 100%;" placeholder="">
                    <el-option  label="订单发货" :value="550"> </el-option>
                    <el-option  label="订单激活" :value="700"> </el-option>
                  </el-select>
                </div>
              </div>
              <div v-if="item.type == 'merchant_order'" class="flexc">
                <div style="width: 200px;"><el-checkbox :disabled="!openswitch" v-model="item.open" :true-label="1"  :false-label="0">邀请分销员</el-checkbox></div>

                <div style="width: 120px; text-align: right;">每发展1人得：</div>
                <div><el-input :disabled="!openswitch" v-model="item.level_exp" style="width: 100px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                <div>要求分销商成功发展订单数量：</div>

                <div><el-input :disabled="!openswitch" v-model="item.order_count" style="width: 100px; margin-right: 30px;" placeholder="请输入"></el-input></div>
                <div>订单要求：</div>

                <div>
                  <el-select :disabled="!openswitch" v-model="item.order_status" style="width: 100%;" placeholder="">
                    <el-option  label="订单发货" :value="550"> </el-option>
                    <el-option  label="订单激活" :value="700"> </el-option>
                  </el-select>
                </div>
              </div>
            </div>

          </div>

          <div style="padding: 30px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
            <div><img src="../../../static/img/tb2.png" style="width: 22px; margin-right: 10px;"></div>
            <div>分销员等级设置</div>
          </div>
          <div class="flexbc" style=" font-size: 14px;">
            <div class="flexc">
              <div style="width: 100px; padding-left: 20px;">序号</div>
              <div style="width: 200px; padding-left: 20px;">等级名</div>
              <div style="width: 400px; padding-left: 20px;">升级条件</div>
              <!-- <div style="width: 400px; padding-left: 20px;">保级条件</div> -->
              <div style="width: 300px; padding-left: 20px;">佣金比例</div>
              <div style=" padding-left: 20px;">分销抽成</div>
            </div>
            <div v-if="openswitch" style="background: rgb(222, 233, 251); color: rgb(0, 90, 255); padding: 10px 15px; border-radius: 25px; cursor: pointer;" @click="add">添加等级  +</div>
          </div>

          <div class="flexc" style="background: #fff; border-radius: 30px; margin-top: 20px; padding: 5px 0; font-size: 14px;" v-for="(item,index) in list.level_conditions">
            <div style="width: 100px; padding-left: 20px;">{{item.level}}级</div>
            <div style="width: 200px; padding-left: 20px;"><el-input :disabled="!openswitch" v-model="item.lname" style="width: 150px; margin-right: 30px;" placeholder="请输入等级值名称"></el-input></div>
            <div style="width: 400px; padding-left: 20px;" v-if="item.level == 1">初始登记无需设置</div>
            <div style="width: 400px; padding-left: 20px;" v-if="item.level != 1">
              等级值达到
              <el-input :disabled="!openswitch" v-model="item.level_exp" style="width: 100px; margin-right: 10px;" placeholder="请输入经验值"></el-input>
            </div>
            <!-- <div style="width: 400px; padding-left: 20px;" v-if="item.level == 1">无条件，不清退</div>
            <div style="width: 400px; padding-left: 20px;"  v-if="item.level != 1">
              <el-input v-model="item.level_con.day" style="width: 70px; margin-right: 10px;" placeholder="请输入天数"></el-input>天内，
              等级值新增
              <el-input v-model="item.level_con.exp" style="width: 70px; margin-right: 10px; margin-left: 10px;" placeholder="请输入经验值"></el-input>能保级
            </div> -->
            <div class="flexc" style="width: 300px; padding-left: 20px;">
              <div>商品佣金：</div>
              <div style="position: relative;">
                <div style="position: absolute; right: 45px; top: 0; line-height: 41px; z-index: 999;">%</div>
                <el-input :disabled="!openswitch" v-model="item.commission_rate" style="width: 100px; margin-right: 30px;" placeholder="请输入商品佣金"></el-input>
              </div>

            </div>
            <div class="flexc">
              <el-radio :disabled="!openswitch" v-model="item.user_fee_type" :label="0" class="flexc">
                <div class="flexc">
                  <div>抽成比例：</div>
                  <div style="position: relative;">
                    <div style="position: absolute; right: 45px; top: 0; line-height: 41px; z-index: 999; color: rgb(2, 12, 29)">%</div>
                    <el-input :disabled="!openswitch" v-model="item.user_fee_percent" style="width: 100px; margin-right: 30px;" placeholder="请输入"></el-input>
                  </div>
                </div>
              </el-radio>

              <el-radio :disabled="!openswitch" v-model="item.user_fee_type" :label="1" class="flexc">
                <div class="flexc" >
                  <div>抽成金额：</div>
                  <div style="position: relative;">
                    <el-input :disabled="!openswitch" v-model="item.user_fee_amount" @input="shuru(item)" style="width: 100px; margin-right: 30px;" placeholder="请输入"></el-input>
                  </div>

                  <div v-if="item.jinggao">
                    <el-tooltip class="item" effect="dark" content="根据您当前的的分销层级，设置该金额会导致低于50元佣金的商品在末端分销商处佣金为负数。" placement="top">
                      <div class="t_over_text">
                        警告
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </el-radio>

            </div>
          </div>
          <div v-if="openswitch" style="background: rgb(222, 233, 251); color: rgb(0, 90, 255); padding: 10px 0; border-radius: 25px; cursor: pointer; margin-top: 20px; width: 100px; text-align: center;" @click="baocun">保存</div>

          <!-- <div style="padding: 30px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
            <div><img src="../../../static/img/tb3.png" style="width: 22px; margin-right: 10px;"></div>
            <div>编辑分销招商说明</div>
          </div>

          <div v-if="openswitch" style="margin: 0px 0;"><fuwenben :content="reseller_inv_des" @getcontent="getcontent" v-if="relo"></fuwenben></div>

          <div style="background: rgb(222, 233, 251); color: rgb(0, 90, 255); padding: 10px 0; margin-bottom: 50px; border-radius: 25px; cursor: pointer; margin-top: 20px; width: 100px; text-align: center;" @click="postf()">保存</div> -->
			<!-- <footers></footers> -->
		</div>
      </div>
    </div>


    <!-- <el-dialog title="设置排序" :visible.sync="paixu_log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div><el-input v-model="dangqianshangpin.order" style="width: 360px;"></el-input></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paixu_log = false">关闭</el-button>
        <el-button type="primary" @click="xiugai">确定</el-button>
      </span>
    </el-dialog> -->


    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-top: 1rem;">
      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem;">
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="width: 2px; height: 0.2rem; background: rgb(2, 12, 29); margin-right: 10px; overflow: hidden;"></div>
          <div style="font-size: 0.36rem; font-weight: bold;">分销商管理</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="color: rgb(175, 179, 188);">首页</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div style="color: rgb(175, 179, 188);">分销商管理</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div>分销模式</div>
        </div>
      </div>

      <div style="padding: 0.3rem;">
        开发中
      </div>
    </div>
    <!-- 修改等级管理 -->
    <el-dialog
      :title="openswitch==0?'关闭等级管理':'启用等级管理'"
      :visible.sync="isshowlevel"
      width="500px"
      :close-on-click-modal="false">
      <div v-if="openswitch==0">
        关闭等级管理后，分销商由等级控制的佣金比例和抽成比例值仍会保留，您可在此基础上修改。
      </div>
      <div v-if="openswitch==1">
        启用等级管理后，原人工编辑的分销商佣金比例及抽成比例将会被等级设置的比例覆盖，确定开启么？
      </div>
      <div style="text-align: right;margin-top: 30px;">
        <el-button round @click="reslevel">取 消</el-button>
        <el-button round type="primary" @click="surelevel">确 定</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
  import fuwenben from '@/components/fuwenben.vue'
	export default {
		name: 'yongjinjilu',
    components:{
      left,top,topandleft,fuwenben,footers
    },
		data() {
			return {
        search:{
          page:1,
          page_size:20,
        },
        list:[],
        total:0,
        widthss:false,
        shoujiban:false,
        loading: false,
        finished: false,
        relo:true,
        reseller_inv_des:"",
        openswitch:0,
        isshowlevel:false
			}
		},
		created() {

		},
		mounted() {

      if(window.screen.width == 1920){
        this.widthss = true
      }
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
      }else{

      }
      this.getf()
      let p = this.getinfo()
      p.then(res=>{
        this.getlist()
      })
		},
		methods: {
      shuru:function(item){
        let m = item.user_fee_amount * this.info.limit_level
        console.log(m)
        if(m > 50){
          this.$set(item,'jinggao',true)
        }else{
          this.$set(item,'jinggao',false)
        }
      },

      getinfo:function(){
        return new Promise((res,rej)=>{
          axios.get('/own/system/get').then((response)=>{
          	if (response.data.msg.code == 0) {
              this.info = response.data.data
              this.openswitch = response.data.data.level_open
              res('ok')
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })
      },

      getf:function(){
        axios.get('/own/reseller/inv/des/get').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.reseller_inv_des = response.data.data.reseller_inv_des
            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      postf:function(){
        axios.post('/own/reseller/inv/des',{reseller_inv_des:this.reseller_inv_des}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.getf()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getcontent:function(item){
        this.reseller_inv_des = item
      },
      baocun:function(){
        let obj = {
          id:this.list.id,
          level_conditions:JSON.stringify(this.list.level_conditions),
          level_name:this.list.level_name,
          level_rules:JSON.stringify(this.list.level_rules),
          site_id:this.list.site_id,
        }

        axios.post('/own/level/update',obj).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('保存成功');
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      add:function(){
        if(this.list.level_conditions.length == 7){
          this.$message.error('最多7级，不能增加了');
          return false
        }
        this.list.level_conditions.push(
          {
            commission_rate:'0',
            level:this.list.level_conditions.length + 1,
            level_con:{
              day:0,
              exp:0
            },
            level_exp:0,
            user_fee_percent:0
          }
        )
      },

      xiazai:function(id){
        axios.post('/own/commission/sumdetail/exp',{id:id}).then((response)=>{
        	if (response.data.msg.code == 0) {
            window.location.href = location.origin + '/' + response.data.data
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      sousuo:function(){
        this.search.page = 1
        this.getlist()
      },
      getlist:function(){
        axios.get('/own/level/info').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data

            this.list.level_rules = JSON.parse(this.list.level_rules)
            this.list.level_conditions = JSON.parse(this.list.level_conditions)
            this.list.level_conditions.forEach(item=>{
              if(item.user_fee_type == 1){
                let m = item.user_fee_amount * this.info.limit_level
                if(m > 50){
                  this.$set(item,'jinggao',true)
                }else{
                  this.$set(item,'jinggao',false)
                }
              }
            })
            console.log(this.list.level_rules)
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
      //修改等级管理开关
      postk:function(val){
        this.isshowlevel = true
        
        
      },
      //取消
      reslevel(){
        if(this.openswitch==1){
          this.openswitch=0
        }else{
          this.openswitch=1
        }
        this.isshowlevel = false
      },
      //确认
      surelevel(){
        if(this.openswitch==1){
          axios.post('/own/system/config',{level_open:this.openswitch}).then((response)=>{
                if (response.data.msg.code == 0) {
                  this.baocun()
                  this.getinfo()
                  this.isshowlevel = false
                } else {
                  this.$message.error(response.data.msg.info);
                }
              })
        }else{
          axios.post('/own/system/config',{level_open:this.openswitch}).then((response)=>{
            if (response.data.msg.code == 0) {
              this.getinfo()
              this.isshowlevel = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        }
      }
		}
	}
</script>


<style scoped lang="less">
  .yongjinjilu{
    /deep/ .el-switch__core{ width: 85px !important; height: 41px; border-radius: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241);}
    /deep/ .el-switch.is-checked .el-switch__core {
        border-color: #005aff !important;
        background-color: #005aff !important;
    }
    /deep/ .el-switch.is-checked .el-switch__core::after{margin-left: -33px; left: 100% !important;}
    /deep/ .el-switch__core:after{ width: 31px; height: 31px;  top: 4px; left: 4px; background: rgb(227, 232, 241);}

  }
</style>
